<template>
  <!-- 文章详情抽屉 -->  
  <div class="app-appNews-detail">
    <el-drawer v-model="isShowDialog" size="80%" direction="ltr">
      <template #header>
        <h4>文章详情</h4>
      </template>
      <el-form ref="formRef" :model="formData" label-width="100px">          
        <el-row>        
          <el-col :span="12">          
            <el-form-item label="ID">{{ formData.id }}</el-form-item>          
          </el-col>        
          <el-col :span="12">            
            <el-form-item label="分类">{{ formData.linkedCategoryId?formData.linkedCategoryId.cateName:'' }}</el-form-item>          
          </el-col>        
          <el-col :span="12">          
            <el-form-item label="标题">{{ formData.title }}</el-form-item>          
          </el-col>        
          <el-col :span="12">          
            <el-form-item label="作者">{{ formData.author }}</el-form-item>          
          </el-col>        
          <el-col :span="12">
            <el-form-item label="缩略图">
              <el-image
                style="width: 150px; height: 150px"
                v-if="!proxy.isEmpty(formData.thumb)"
                :src="proxy.getUpFileUrl(formData.thumb)"
                fit="contain"></el-image>
            </el-form-item>
          </el-col>        
          <el-col :span="12">          
          <el-form-item label="状态">{{ proxy.getOptionValue(formData.status, statusOptions,'value','label') }}</el-form-item>          
          </el-col>        
          <el-col :span="12">          
            <el-form-item label="点击数">{{ formData.hits }}</el-form-item>          
          </el-col>        
          <el-col :span="12">
            <el-form-item label="内容">
              <p v-html="formData.content"></p>
            </el-form-item>
          </el-col>        
          <el-col :span="12">
            <el-form-item label="创建日期">{{ proxy.parseTime(formData.createdAt, '{y}-{m}-{d} {h}:{i}:{s}') }}</el-form-item>
          </el-col>      
        </el-row>      
      </el-form>
    </el-drawer>
  </div>
</template>
<script lang="ts">
  import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance,computed } from 'vue';
  import {ElMessageBox, ElMessage, FormInstance,UploadProps} from 'element-plus';  
  import {
    listAppNews,
    getAppNews,
    delAppNews,
    addAppNews,
    updateAppNews,    
  } from "/@/api/app/appNews";  
  import GfUeditor from "/@/components/ueditor/index.vue"  
  import {getToken} from "/@/utils/gfast"  
  import {
    AppNewsTableColumns,
    AppNewsInfoData,
    AppNewsTableDataState,
    AppNewsEditState
  } from "/@/views/app/appNews/list/component/model"
  export default defineComponent({
    name:"ApiV1AppAppNewsDetail",    
    components:{      
      GfUeditor,      
    },    
    props:{      
      categoryIdOptions:{
        type:Array,
        default:()=>[]
      },      
      statusOptions:{
        type:Array,
        default:()=>[]
      },      
    },    
    setup(props,{emit}) {      
      const baseURL:string|undefined|boolean = import.meta.env.VITE_API_URL      
      const {proxy} = <any>getCurrentInstance()
      const formRef = ref<HTMLElement | null>(null);
      const menuRef = ref();      
      //图片上传地址
      const imageUrlThumb = ref('')
      //上传加载
      const upLoadingThumb = ref(false)      
      const state = reactive<AppNewsEditState>({
        loading:false,
        isShowDialog: false,
        formData: {          
          id: undefined,          
          categoryId: undefined,          
          linkedCategoryId:{id:undefined,cateName:undefined },          
          title: undefined,          
          author: undefined,          
          thumb: undefined,          
          status: false ,          
          hits: undefined,          
          content: undefined,          
          createdAt: undefined,          
          updatedAt: undefined,          
          deletedAt: undefined,          
          linkedAppNewsAppNewsCategory: {            
            id:undefined,    // ID            
            cateName:undefined,    // 名称            
          },          
        },
        // 表单校验
        rules: {          
        }
      });
        // 打开弹窗
        const openDialog = (row?: AppNewsInfoData) => {
          resetForm();
          if(row) {
            getAppNews(row.id!).then((res:any)=>{
              const data = res.data;              
              //单图地址赋值
              imageUrlThumb.value = data.thumb ? proxy.getUpFileUrl(data.thumb) : ''              
              state.formData = data;
            })
          }
          state.isShowDialog = true;
        };
        // 关闭弹窗
        const closeDialog = () => {
          state.isShowDialog = false;
        };
        // 取消
        const onCancel = () => {
          closeDialog();
        };
        const resetForm = ()=>{
          state.formData = {            
            id: undefined,            
            categoryId: undefined,            
            linkedCategoryId:{id:undefined,cateName:undefined },            
            title: undefined,            
            author: undefined,            
            thumb: undefined,            
            status: false ,            
            hits: undefined,            
            content: undefined,            
            createdAt: undefined,            
            updatedAt: undefined,            
            deletedAt: undefined,            
            linkedAppNewsAppNewsCategory: {              
              id:undefined,    // ID              
              cateName:undefined,    // 名称              
            },            
          }
        };        
        //关联app_news_category表选项
        const getAppNewsCategoryItemsCategoryId = () => {
          emit("getAppNewsCategoryItemsCategoryId")
        }
        const getCategoryIdOp = computed(()=>{
          getAppNewsCategoryItemsCategoryId()
          return props.categoryIdOptions
        })        
        //单图上传缩略图
        const handleAvatarSuccessThumb:UploadProps['onSuccess'] = (res, file) => {
          if (res.code === 0) {
            imageUrlThumb.value = URL.createObjectURL(file.raw!)
            state.formData.thumb = res.data.path
          } else {
            ElMessage.error(res.msg)
          }
          upLoadingThumb.value = false
        }
        const beforeAvatarUploadThumb = () => {
          upLoadingThumb.value = true
          return true
        }        
        const setUpData = () => {
          return { token: getToken() }
        }        
        //富文本编辑器内容
        const setContentEditContent = (data:string) => {
          state.formData.content = data
        }        
        return {
          proxy,
          openDialog,
          closeDialog,
          onCancel,
          menuRef,
          formRef,          
          getAppNewsCategoryItemsCategoryId,
          getCategoryIdOp,          
          //图片上传地址
          imageUrlThumb,
          //上传加载
          upLoadingThumb,
          handleAvatarSuccessThumb,
          beforeAvatarUploadThumb,          
          setUpData,          
          //富文本编辑器内容
          setContentEditContent,          
          baseURL,          
          ...toRefs(state),
        };
      }
  })
</script>
<style scoped>  
  .app-appNews-detail :deep(.avatar-uploader .avatar) {
    width: 178px;
    height: 178px;
    display: block;
  }
  .app-appNews-detail :deep(.avatar-uploader .el-upload) {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }
  .app-appNews-detail :deep(.avatar-uploader .el-upload:hover) {
    border-color: var(--el-color-primary);
  }
  .app-appNews-detail :deep(.el-icon.avatar-uploader-icon) {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }  
  .app-appNews-detail :deep(.el-form-item--large .el-form-item__label){
    font-weight: bolder;
  }
  .pic-block{
    margin-right: 8px;
  }
  .file-block{
    width: 100%;
    border: 1px solid var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
    margin-bottom: 5px;
    padding: 3px 6px;
  }
  .ml-2{margin-right: 5px;}
</style>